<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/index.css">
  <!-- 在 head 中引入 Swiper CSS -->
  <link rel="stylesheet" href="https://unpkg.com/swiper@11.0.5/swiper-bundle.min.css">
  <link rel="stylesheet" href="./css/index2.css">
  <script src="./js/index/index.js"></script>
  <script src="https://unpkg.com/swiper@11.0.5/swiper-bundle.min.js"></script>
</head>

<body>
  <!-- 导航栏 -->
  <div class="nav">
    <h1>
      <a href=""></a>
    </h1>
    <div class="more"></div>
    <!-- 导航栏 -->
    <ul>
      <li>
        <!-- <a href="#"></a> -->
        <span><a style="color: #fff;"
            href="file:///D:/%E7%AC%94%E8%AE%B0%E4%B9%8B%E5%89%8D%E7%AB%AF/1%E7%AC%94%E8%AE%B0%E4%B9%8BHTML%E5%92%8CCSS/code/day15/index.html">首页</a></span>
        <span>HOME</span>
        <!-- 导航栏下拉菜单开始 -->

      </li>
      <li>
        <span>游戏资料</span>
        <span>DATA</span>
        <!-- 下拉菜单 -->
        <div class="drop-down">
          <ul>
            <li><a href="file:///D:/%E7%AC%94%E8%AE%B0%E4%B9%8B%E5%89%8D%E7%AB%AF/1%E7%AC%94%E8%AE%B0%E4%B9%8BHTML%E5%92%8CCSS/code/day15/src/version/version.html">版本专区</a></li>
            <li><a href="file:///D:/%E7%AC%94%E8%AE%B0%E4%B9%8B%E5%89%8D%E7%AB%AF/1%E7%AC%94%E8%AE%B0%E4%B9%8BHTML%E5%92%8CCSS/code/day15/src/hero/hero.html">英雄资料</a></li>
            <li><a href="file:///D:/%E7%AC%94%E8%AE%B0%E4%B9%8B%E5%89%8D%E7%AB%AF/1%E7%AC%94%E8%AE%B0%E4%B9%8BHTML%E5%92%8CCSS/code/day15/src/announce/announce.html">爆料站</a></li>
            <li><a
                href="file:///D:/%E7%AC%94%E8%AE%B0%E4%B9%8B%E5%89%8D%E7%AB%AF/1%E7%AC%94%E8%AE%B0%E4%B9%8BHTML%E5%92%8CCSS/code/day15/src/world/wallpaper.html">游戏壁纸</a>
            </li>
            <li><a href="">世界观站</a></li>
          </ul>
        </div>
      </li>
      <li>
        <span>内容中心</span>
        <span>CONTENTS</span>
        <div class="drop-down">
          <ul>
            <li><a href="">攻略中心</a></li>
            <li><a href="">开放素材库</a></li>
            <li><a href="">N内容共创平台</a></li>
          </ul>
        </div>
      </li>
      <li>
        <span>赛事中心</span>
        <span>MATCH</span>
        <div class="drop-down">
          <ul>
            <li><a href="">HKPL</a></li>
            <li><a href="">K甲</a></li>
            <li><a href="">H挑战者杯</a></li>
            <li><a href="">全国大赛</a></li>
            <li><a href="">高校联赛</a></li>
            <li><a href="">N赛事授权</a></li>
            <li><a href="">N授权合作赛</a></li>
            <li><a href="">赛事数据</a></li>
          </ul>
        </div>
      </li>
      <li>
        <span>王者文化</span>
        <span>CULRURE</span>
        <div class="drop-down">
          <ul>
            <li><a href="">NIP共创计划</a></li>
            <li><a href="">N龙翼王者卡</a></li>
            <li><a href="">共创基地</a></li>
            <li><a href="">王者荣耀天天向上</a></li>
          </ul>
        </div>
      </li>
      <li>
        <span>玩家支持</span>
        <span>PLAYER</span>
        <div class="drop-down">
          <ul>
            <li><a href="">腾讯游戏防沉迷</a></li>
            <li><a href="">成长守护平台</a></li>
            <li><a href="">对局环境情报站</a></li>
            <li><a href="">客服专区</a></li>
            <li><a href="">礼包兑换</a></li>
            <li><a href="">自助服务</a></li>
            <li><a href="">商户特权</a></li>
            <li><a href="">手语打法参考</a></li>
          </ul>
        </div>
      </li>
      <li>
        <span>IP新游</span>
        <span>NEW&nbsp;GAMES</span>
        <div class="drop-down">
          <ul>
            <li><a href="">N王者荣耀世界</a></li>
            <li><a href="">N王者万象棋</a></li>
          </ul>
        </div>
      </li>
    </ul>
    <a class="down">下载游戏</a>
    <div class="login">
      <img src="./assets/login.png" alt="">
      <span>欢迎登录</span>
    </div>
  </div>

  <!-- 妙手空空角色开始 -->
  <div class="box1">

    <!-- 右侧年龄限制 -->
    <div class="shiling">
      <img src="./assets/shiling.webp" alt="">
    </div>
    <!-- 防沉迷 -->
    <div class="fanchenmi">
      <img src="./assets/fanchenmi.webp" alt="">
    </div>
    <!-- 中心区域下载 -->
    <div class="centerDown">
      <img src="./assets/downloadButton-163338bf.webp" alt="">
    </div>

    <!-- 轮播图+右侧列表 -->
    <div class="carousel-lists">
      <!-- 轮播图容器 -->
      <div class="swiper">
        <div class="swiper-wrapper">
          <!-- 轮播项（图片可替换为任意内容） -->
          <div class="swiper-slide"><img src="./assets/carousel1.png" alt=""></div>
          <div class="swiper-slide"><img src="./assets/carousel2.png" alt=""></div>
          <div class="swiper-slide"><img src="./assets/carousel3.png" alt=""></div>
          <div class="swiper-slide"><img src="./assets/carousel4.png" alt=""></div>
          <div class="swiper-slide"><img src="./assets/carousel5.jpg" alt=""></div>
        </div>

        <!-- 导航按钮（可选） -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 分页器（可选） -->
        <div class="swiper-pagination"></div>
      </div>

      <!-- 右侧列表 -->
      <div class="lists">
        <ul>
          <li>
            <span class="title">
              热门
              <img src="./assets/下载.png" alt="">
            </span>
            <!-- 下面控制隐藏 -->
            <div class="category-content">
              <div class="category-content-item">
                <span>热门</span>
                <span>刘禅米莱狄源梦皮肤设计大赛“优秀创意奖”公示</span>
                <span>04/03</span>
              </div>
              <div class="category-content-item">
                <span>热门</span>
                <span>4月3日版本更新公告</span>
                <span>04/02</span>
              </div>
              <div class="category-content-item">
                <span>热门</span>
                <span>【B.Duck小黄鸭联动】假期活动一览！</span>
                <span>04/02</span>
              </div>
              <div class="category-content-item">
                <span>热门</span>
                <span>【小乔-秘证寻踪】全新秒杀皮肤爆料视频来啦！</span>
                <span>04/01</span>
              </div>
            </div>
          </li>
          <li>
            <span class="title">
              公告
              <img src="./assets/下载.png" alt="">
            </span>
            <!-- 下面控制隐藏 -->
            <div class="category-content">
              <div class="category-content-item">
                <span>公告</span>
                <span>4月5日部分机型优化版本更新公告</span>
                <span>04/04</span>
              </div>
              <div class="category-content-item">
                <span>公告</span>
                <span>英雄平衡性调整 | 项羽增强、空空儿降温</span>
                <span>04/02</span>
              </div>
              <div class="category-content-item">
                <span>公告</span>
                <span>免费送苏烈联动新皮肤，变身大作战联动玩法开启</span>
                <span>04/02</span>
              </div>
              <div class="category-content-item">
                <span>公告</span>
                <span>4月3日版本更新公告</span>
                <span>04/02</span>
              </div>
            </div>
          </li>
          <li>
            <span class="title">
              新闻
              <img src="./assets/下载.png" alt="">
            </span>
            <!-- 下面控制隐藏 -->
            <div class="category-content">
              <div class="category-content-item">
                <span>新闻</span>
                <span>刘禅米莱狄源梦皮肤设计大赛“优秀创意奖”公示</span>
                <span>04/03</span>
              </div>
              <div class="category-content-item">
                <span>新闻</span>
                <span>英雄平衡性调整 | 项羽增强、空空儿降温</span>
                <span>04/02</span>
              </div>
              <div class="category-content-item">
                <span>新闻</span>
                <span>【B.Duck小黄鸭联动】假期活动一览！</span>
                <span>04/02</span>
              </div>
              <div class="category-content-item">
                <span>新闻</span>
                <span>【苏烈-春野闲踪】皮肤爆料来袭，参与活动免费得！</span>
                <span>04/01</span>
              </div>
            </div>

          </li>
          <li>
            <span class="title">
              活动
              <img src="./assets/下载.png" alt="">
            </span>
            <!-- 下面控制隐藏 -->
            <div class="category-content">
              <div class="category-content-item">
                <span>活动</span>
                <span>免费送苏烈联动新皮肤，变身大作战联动玩法开启</span>
                <span>04/02</span>
              </div>
              <div class="category-content-item">
                <span>活动</span>
                <span>小黄鸭天幕祈愿活动公告</span>
                <span>04/02</span>
              </div>
              <div class="category-content-item">
                <span>活动</span>
                <span>2025年第2期荣耀战令更新上线—天天开心鸭</span>
                <span>03/31</span>
              </div>
              <div class="category-content-item">
                <span>活动</span>
                <span>小黄鸭B.duck联动上线, 超多福利等你领！</span>
                <span>03/26</span>
              </div>
            </div>

          </li>
          <li>
            <span class="title">
              赛事
              <img src="./assets/下载.png" alt="">
            </span>
            <!-- 下面控制隐藏 -->
            <div class="category-content">
              <div class="category-content-item">
                <span>赛事</span>
                <span>25年K甲春季赛增补期选手名单公示，多方力量助力联赛生态升级</span>
                <span>03/20</span>
              </div>
              <div class="category-content-item">
                <span>赛事</span>
                <span>K甲春季赛常规赛战队现状解析—新势力崛起与传统豪门的转型阵痛</span>
                <span>03/17</span>
              </div>
              <div class="category-content-item">
                <span>赛事</span>
                <span>开赛倒计时1天12支战队整装待发，2025K甲春季赛即将打响</span>
                <span>02/15</span>
              </div>
              <div class="category-content-item">
                <span>赛事</span>
                <span>2025年王者荣耀甲级职业联赛（K甲）春季赛赛事规则</span>
                <span>02/14</span>
              </div>
            </div>

          </li>
          <li>
            <span>更多</span>
          </li>
        </ul>
      </div>

    </div>

    <!-- 向下滑动更多精彩下载1.png -->
    <div class="glide">
      <span>向下滑动</span>
      <div class="glide-img">
        <img src="./assets/下载 (1).png" alt="">
      </div>

      <span>更多精彩</span>
    </div>
  </div>

  <!-- 妙手空空角色结束 -->

  <!-- 第二个开始 -->
  <div class="box2">
    <div class="left">
      <div class="title">
        <img src="./assets/world/定位.png">
        <span>世界观</span>
      </div>
      <div class="content">
        <img src="./assets/world/选择线.png" class="list-img"></img>
        <div class="category">
          <a class="region" href="./src/world/region.html" target="worldIframe">
            <!-- <img src="./assets/world/实边框.png"> -->
            地区
          </a>
          <a class="hero " href="./src/world/hero.html" target="worldIframe">
            英雄
          </a>
          <a class="skin" href="./src/world/skin.html" target="worldIframe">
            皮肤
          </a>

          <a class="cartoon" href="./src/world/cartoon.html" target="worldIframe">
            动画
          </a>
        </div>

      </div>

    </div>
     <!-- 右侧图片 -->
      <div class="right">
        <iframe src="./src/world/region.html" name="worldIframe"></iframe>
      </div>
  </div>
  <!-- 第二个结束 -->

  <!-- 在 body 末尾引入 Swiper JS -->
  
  
</body>

</html>